<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品管理</title>
		<link rel="stylesheet" href="css/reg.css" />
		<style>
			.goods_title{
				height: 30px;
				width: 100%;
				font-size: 20px;
				border-bottom: 5px solid darkgray ;
			}
			.goods_button{
				margin-top: 10px ;
				color: white;
				padding-left:10px;
				width: 100%;
			}
			button {
    			border: none;
    			color: white;
	    		text-ali:;gn: center;
    			text-decoration: none;
    			display: inline-block;
    			font-size: 16px;
    			margin: 2px 2px;
    			cursor: pointer;
    			border-radius: 10px;
				}
			.button1{
				width: 80px;
				height: 50px;
				background-color: blue;
			}
			.button2{
				width: 120px;
				height: 50px;
				background-color: red;
			}
			.button3{
				width: 120px;
				height: 50px;
				background-color: green;
			}
			.goods_service{
				float: right;
			}
			.goods_button>input{
				margin-top: 5px;
				height: 40px;
				padding-right:50px ;
				float: right;
				position: absolute;
				right: 125px;
			}
			.button4{
				width: 120px;
				height: 50px;
				background-color: green;
				float: right;
			}
			table {
				font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
				width:80%;
				border-collapse:collapse;
				text-align: center;
				margin-left:  10%;
				margin-top: 2%;
				}
			table, td, th {
   				 border: 1px solid black;
   				 line-height: c;
			}
		</style>
	</head>
	
	<body>
		<!--顶层-->
		<div class="goods_title">
			<a>商 品 管 理 - > 商 品 列 表</a>
		</div>
		<!--中层-->
		<div class="goods_choose">
			<!--左侧选择按钮-->
			<div id="button" class="goods_button">
				<button class="button1">全选</button>
				<button class="button2">批量删除</button>
				<button class="button3">添加商品</button>
				<input placeholder="请输入关键字" />
				<button class="button4">搜索</button>
			</div>
		</div>
		<!--底层-->
		<div class="goods_list">
			<table>
			<tr>
				<td><input type="checkbox"/></td>
				<td>编号</td>
				<td>商品名</td>
				<td>商品类别</td>
				<td>单价</td>
				<td>库存</td>
				<td>状态</td>
				<td>操作</td>
			</tr>
			<tr>
				<td style="width: 5px;"><input type="checkbox"/></td>
				<td>1</td>
				<td>小米大西瓜</td>
				<td>水果</td>
				<td>100</td>
				<td>200</td>
				<td>已上架</td>
				<td><button class="button1">详情</button>
					<button class="button2" style="width: 80px;">编辑</button>
					<button class="button3" style="width: 80px;">删除</button>
				</td>
			</tr>
			<tr>
				<td style="width: 5px;"><input type="checkbox"/></td>
				<td>2</td>
				<td>宝马拖拉机</td>
				<td>汽车</td>
				<td>10000</td>
				<td>100</td>
				<td>已上架</td>
				<td><button class="button1">详情</button>
					<button class="button2" style="width: 80px;">编辑</button>
					<button class="button3" style="width: 80px;">删除</button>
				</td>
			</tr>
			</table>
		</div>	
	</body>
</html>
